<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%@ page import="com.deepai.dprsmgr.db.model.User" %>
<%@ page import="com.deepai.dprsmgr.utils.DateUtil" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>
<%@include file="base_path.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-cache"/>
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="description" content="">

    <link rel="stylesheet" type="text/css" href="<%=basePath%>/lib/bootstrap/3.3.7/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen"
          href="<%=basePath%>/lib/jqgrid/5.2.1/css/ui.jqgrid-bootstrap.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/lib/lobibox/css/lobibox.min.css"/>
    <link rel="stylesheet" type="text/css" media="screen" href="<%=basePath%>/css/mycss.css"/>
    <title>主页</title>
    <style type="text/css">
        .block-title {
            font-size: 15px;
            color: #545b66;
            margin-bottom: 20px;
        }

        .col-xs-25 {
            width: 25%;
            min-width: 275px;
        }

        .col-xs-20 {
            width: 20%;
            min-width: 220px;
        }

        .count-box .item {
            height: 90px;
            border-radius: 5px;
            /* background-color: #4ca5ff; */
            background-image: url(<%=basePath%>/images/image/count1.png);
            background-size: 100% 100%;
            color: #FFF;
            text-align: center;
            position: relative;
            margin-bottom: 17px;
        }

        .item .count-icon {
            position: absolute;
            display: inline-block;
            width: 50px;
            height: 50px;
            background-color: #FFFFFF;
            border-radius: 50%;
            background-image: url(<%=basePath%>/images/image/all.png);
            background-size: 28px 28px;
            background-position: center center;
            background-repeat: no-repeat;
            left: 50%;
            top: 50%;
            margin-left: -80px;
            margin-top: -25px;
        }

        .item.complete {
            background-image: url(<%=basePath%>/images/image/count2.png);
            background-size: 100% 100%;
        }

        .item.complete .count-icon {
            background-image: url(<%=basePath%>/images/image/complete.png);
        }

        .item.break {
            background-image: url(<%=basePath%>/images/image/count3.png);
            background-size: 100% 100%;
        }

        .item.break .count-icon {
            background-image: url(<%=basePath%>/images/image/break.png);
        }

        .item.stop {
            background-image: url(<%=basePath%>/images/image/count4.png);
            background-size: 100% 100%;
        }

        .item.stop .count-icon {
            background-image: url(<%=basePath%>/images/image/stop.png);
        }

        .item .count-info {
            display: inline-block;
            width: 100%;
            height: 100%;
            padding-left: 50%;
            text-align: left;
            padding-top: 18px;
        }

        .item.all:hover {
            box-shadow: 0px 7px 7px -7px #1bb0ff;
        }

        .item.complete:hover {
            box-shadow: 0px 7px 7px -7px #37c0c8;
        }

        .item.break:hover {
            box-shadow: 0px 7px 7px -7px #f39683;
        }

        .item.stop:hover {
            box-shadow: 0px 7px 7px -7px #d677ee;
        }

        .count-number {
            font-size: 26px;
            line-height: 26px;
            margin-right: 6px;
        }

        .count-type {
            margin-top: 7px;
            font-size: 14px;
        }

        .status-box .item {
            height: 90px;
            border-radius: 5px;
            background-color: #12c2b3;
            color: #FFF;
            text-align: center;
            position: relative;
            margin-bottom: 17px;
            padding-top: 21px;
            cursor: pointer;
        }

        .status-box .item:hover {
            background: #01b2a3;
        }

        .status-box .item.active {
            background: #01b2a3;
        }

        .status-count {
            font-size: 26px;
            line-height: 26px;
            margin-bottom: 8px;
        }

        .status-type {
            font-size: 14px;
            line-height: 14px;
        }

        .block {
            padding: 0 20px;
            background: #f7f9fa;
            margin-bottom: 20px;
        }

        .block-head {
            position: relative;
            line-height: 66px;
            font-size: 16px;
            color: #373c44;
            font-weight: bold;
        }

        .head-search {
            position: absolute;
            top: 15px;
            right: 0px;
            width: 280px;
            height: 36px;
            border-radius: 5px;
            border: 1px solid #e8eaf3;
            background: #e8eaf3;
        }

        .head-search.empty_input input {
            height: 34px;
            width: 240px;
            border: none;
            border-radius: 5px;
            padding-left: 10px;
            color: #757b84;
            font-size: 14px;
            background: transparent;
        }

        .head-search input {
            height: 34px;
            width: 206px;
            border: none;
            border-radius: 5px;
            padding-left: 10px;
            color: #757b84;
            font-size: 14px;
            background: transparent;
        }

        .search-btn {
            float: right;
            width: 26px;
            height: 34px;
            padding: 8px;
            cursor: pointer;
            padding-left: 0px;
        }

        .clear-btn {
            float: right;
            width: 26px;
            height: 34px;
            padding: 8px;
            cursor: pointer;
            padding-left: 0px;
        }

        .empty_input .clear-btn {
            display: none;
        }

        .count-box,
        .status-box,
        .block {
            background: #FFF;
            padding: 20px;
            border-radius: 5px;
            margin-top: 20px;
        }

        .block-title h3 {
            margin: 0px;
            font-size: 16px;
            color: #373c44;
            font-weight: bold;
        }

        .during {
            margin-top: 0px;
        }
    </style>
</head>
<body>
<div class="navbar-fixed-top">
    <div class="breadcrumb" style="margin-bottom: 0;">
        <span>首页</span>
        <span class="pull-right" title="刷新">
					<div class="btn-refresh" onclick="location.replace(location.href);">
						<img src="<%=basePath%>/images/refresh.png">
					</div>
				</span>

    </div>
</div>
<div class="container-fluid" style="">
    <div class="count-box" style="margin-top: 0px;">
        <div class="block-title">
            <h3>今日总览</h3>
        </div>
        <div class="row">
            <div class="col-xs-2 col-xs-25">
                <div class="all item">
                    <div class="count-icon">&nbsp;</div>
                    <div class="count-info">
                        <div><span class="count-number">${todayCallCnt}</span>通</div>
                        <div class="count-type">通话量</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-2 col-xs-25">
                <div class="complete item">
                    <div class="count-icon">&nbsp;</div>
                    <div class="count-info">
                        <div><span class="count-number">${todaySolveCnt}</span>通</div>
                        <div class="count-type">已解决量</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-2 col-xs-25">
                <div class="break item">
                    <div class="count-icon">&nbsp;</div>
                    <div class="count-info">
                        <div><span class="count-number">${todayTransferCnt}</span>通</div>
                        <div class="count-type">转人工量</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-2 col-xs-25">
                <div class="stop item">
                    <div class="count-icon">&nbsp;</div>
                    <div class="count-info">
                        <div><span class="count-number">${todayAvgCallTime}</span>秒</div>
                        <div class="count-type">平均通话时长</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="count-box" style="margin-top: 0px;">
        <div class="block-title">
            <h3>昨日总览</h3>
        </div>
        <div class="row">
            <div class="col-xs-2 col-xs-25">
                <div class="all item">
                    <div class="count-icon">&nbsp;</div>
                    <div class="count-info">
                        <div><span class="count-number">${yesterdayCallCnt}</span>通</div>
                        <div class="count-type">通话量</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-2 col-xs-25">
                <div class="complete item">
                    <div class="count-icon">&nbsp;</div>
                    <div class="count-info">
                        <div><span class="count-number">${yesterdaySolveCnt}</span>通</div>
                        <div class="count-type">已解决量</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-2 col-xs-25">
                <div class="break item">
                    <div class="count-icon">&nbsp;</div>
                    <div class="count-info">
                        <div><span class="count-number">${yesterdayTransferCnt}</span>通</div>
                        <div class="count-type">转人工量</div>
                    </div>
                </div>
            </div>
            <div class="col-xs-2 col-xs-25">
                <div class="stop item">
                    <div class="count-icon">&nbsp;</div>
                    <div class="count-info">
                        <div><span class="count-number">${yesterdayAvgCallTime}</span>秒</div>
                        <div class="count-type">平均通话时长</div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="block during">
        <div id="container" style="width: 100%;height:300px;">

        </div>

    </div>

    <div class="block during">
        <div id="container2" style="width: 100%;height:300px;">

        </div>

    </div>

</div>

<script type="text/javascript" src="<%=basePath%>/lib/jquery/1.11.0/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootstrap/3.3.7/js/bootstrap.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/bootbox/bootbox.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jqgrid/5.2.1/js/i18n/grid.locale-cn.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/jqgrid/5.2.1/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lobibox/js/lobibox.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lobibox/js/messageboxes.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/lobibox/js/notifications.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/static/h-ui.admin/js/H-ui.admin.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/common.js"></script>
<script type="text/javascript" src="<%=basePath%>/lib/echarts/3.7.1/echarts.js"></script>
<script type="text/javascript">

    $(function () {
        var domByDays = document.getElementById("container");
        var myChartByDays = echarts.init(domByDays);
				
		var domBy24Hour = document.getElementById("container2");
		var myChartBy24Hour = echarts.init(domBy24Hour);
		// 走的后端内网，先注释掉
		// getDaysChartData(domByDays, myChartByDays);
		// get24HourChartData(domBy24Hour, myChartBy24Hour);
    });
	
    function deepClone(obj) {//深拷贝
        var objClone = Array.isArray(obj) ? [] : {};
        if (obj && typeof obj === "object") {
            for (key in obj) {
                if (obj.hasOwnProperty(key)) {
                    //判断ojb子元素是否为对象，如果是，递归复制
                    if (obj[key] && typeof obj[key] === "object") {
                        objClone[key] = deepClone(obj[key]);
                    } else {
                        //如果不是，简单复制
                        objClone[key] = obj[key];
                    }
                }
            }
        }
        return objClone;
    }

    function getDaysChartData(dom, myChart) {//获取日线数据
		var array;
        $.ajax({
            url: "<%=basePath%>/welcome/getDateReportData.do",
            type: "post",
            async: true,
            dataType: "json",
            success: function(data) {
                if (data["errorCode"] == 0) {
                    console.log(data["list"])
					array = data["list"];
                    var localData = serverDataToLocalOption(array);
                    renderChart(myChart, dom, "近7天通话情况（按天）", localData)
                }
            }
        });
    }
    function get24HourChartData(dom, myChart) {//获取小时线数据
		var array;
        $.ajax({
            url: "<%=basePath%>/welcome/get24HourReportData.do",
            type: "post",
            async: true,
            dataType: "json",
            success: function(data) {
                if (data["errorCode"] == 0) {
                    console.log(data["list"])
                    array = data["list"];
                    var localData = serverDataToLocalOption(array);
                    renderChart(myChart, dom, "近7天通话情况（按小时）", localData)
                }
            }
        });

    }
	
	function serverDataToLocalOption(serverData) {
		var legendData = []; //lengend参数
		var xAxisData = []; //xAxis参数
		var _seriesData = deepClone(serverData); //series参数
		$(serverData).each(function (index, item) {
		    legendData.push(item.name);
		    _seriesData[index].type = "line";
		    _seriesData[index].stack = item.name;
		    var _thisDataArray = [];
		    $(item.data).each(function (_index, _item) {
		        _thisDataArray.push(_item.yValue);
		    })
		    _seriesData[index].data = _thisDataArray
		})
		
		$(serverData[0].data).each(function (index, item) {
		    xAxisData.push(item.xValue);
		});
		
		var rObj = {
			xAxis: xAxisData,
			legend: legendData,
			data: _seriesData
		}	
		return rObj
	}
	
	function renderChart(myChart, dom, chartName, localData) {
		var option = {
		    title: {
		        text: chartName
		    },
		    tooltip: {
		        trigger: 'axis'
		    },
		    legend: {
		        data: localData.legend
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    toolbox: {
		        feature: {
		            saveAsImage: {}
		        }
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        data: localData.xAxis
		    },
		    yAxis: {
		        type: 'value'
		    },
		    series: localData.data
		};
		if (option && typeof option === "object") {
		    myChart.setOption(option, true);
		}
	}
</script>
<script>

</script>
</body>
</html>
